<template>
  <div class="container">
    <header>
      <div class="logo">
        <router-link to="/">
          <img src="@/assets/logo.png" alt="Logo">
          <span>汽车商城</span>
        </router-link>
      </div>
      <nav>
        <router-link to="/">首页</router-link>
        <router-link to="/cars">汽车</router-link>
        <router-link to="/dealers">经销商</router-link>
        <router-link to="/digital-human">数字人</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/contact">联系我们</router-link>
      </nav>
      <div class="user-actions">
        <template v-if="!token">
          <router-link to="/login">登录</router-link>
          <router-link to="/register">注册</router-link>
        </template>
        <template v-else>
          <el-dropdown @command="handleCommand">
            <span class="user-info">
              {{ username }} <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">个人中心</el-dropdown-item>
              <el-dropdown-item command="orders">我的订单</el-dropdown-item>
              <el-dropdown-item command="wishlist">我的收藏</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </div>
    </header>
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <div class="footer-content">
        <div class="footer-section">
          <h3>关于我们</h3>
          <p>汽车商城是中国领先的汽车交易平台，提供新车、二手车销售及相关服务。</p>
        </div>
        <div class="footer-section">
          <h3>联系方式</h3>
          <p>电话: 400-123-4567</p>
          <p>邮箱: contact@carshop.com</p>
        </div>
        <div class="footer-section">
          <h3>关注我们</h3>
          <div class="social-links">
            <a href="#"><i class="el-icon-s-platform"></i></a>
            <a href="#"><i class="el-icon-s-custom"></i></a>
            <a href="#"><i class="el-icon-s-promotion"></i></a>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2023 汽车商城. 保留所有权利.</p>
      </div>
    </footer>
    <CustomerService />
  </div>
</template>

<script>
import { getToken, removeToken } from '@/utils/auth'
import { apiLogout } from '@/api/auth'
import CustomerService from '@/components/CustomerService.vue'

export default {
  name: 'FrontLayout',
  components: {
    CustomerService
  },
  data() {
    return {
      token: getToken(),
      username: ''
    }
  },
  created() {
    // 如果已登录，获取用户信息
    if (this.token) {
      this.username = sessionStorage.getItem('username') || '用户'
    }
  },
  methods: {
    handleCommand(command) {
      if (command === 'logout') {
        this.logout()
      } else {
        this.$router.push(`/user/${command}`)
      }
    },
    logout() {
      apiLogout().then(() => {
        removeToken()
        sessionStorage.clear()
        this.$message.success('退出登录成功')
        this.$router.push('/login')
      }).catch(error => {
        console.error('退出登录失败', error)
      })
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  display: flex;
  align-items: center;
}

.logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
}

.logo img {
  height: 40px;
  margin-right: 10px;
}

.logo span {
  font-size: 20px;
  font-weight: bold;
}

nav {
  display: flex;
  gap: 1.5rem;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  position: relative;
  padding: 5px 0;
}

nav a.router-link-active {
  color: #409EFF;
}

nav a.router-link-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #409EFF;
}

.user-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.user-actions a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.user-info {
  cursor: pointer;
  color: #333;
}

main {
  flex: 1;
  padding: 2rem;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 2rem;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-section {
  flex: 1;
  min-width: 250px;
}

.footer-section h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-links a {
  color: #fff;
  font-size: 1.5rem;
}

.footer-bottom {
  margin-top: 2rem;
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
</style> 